import React, { useState } from 'react';
import classnames from 'classnames';
export type AlertType ='success' |'danger' |'default' |'warning';

interface AlertProps {
  title: string;
  description?: string;
  type?: AlertType;
  onClose?: () => void;
  closable?: boolean;
}

const Alert: React.FC<AlertProps> = (props) => {
  const [hide, setHide] = useState(false)
  const {
    title,
    description,
    type,
    onClose,
    closable
  } = props;
  const classes = classnames('vw-alert', {
    [`vw-alert-${type}`]: type,
  })
  const titleClasses = classnames('vw-alert-title', {
    'bold-title': description,
  })
  const handleClose = (e: React.MouseEvent) => {
    if (onClose) {
      onClose()
    }
    setHide(true)
  }
  return (
    <div style={{ display: hide ? 'none' : 'block' }}>
      <div className={classes}>
        <span className={titleClasses}>{title}</span>
        {description && <p className="vw-alert-desc">{description}</p>}
        {closable && <span className="vw-alert-close" onClick={handleClose}>{'关闭'}</span>}
      </div>
    </div>
  )
}

Alert.defaultProps = {
  type: 'default',
  closable: true
}

export default Alert;
